<template>
  <div class="wrapper">
    <!--{{swiperList_}}-->
    <!-- v-if="swiperList.length"   模板里面尽量不出现计算代码。。  -->
    <swiper :options="swiperOptionimg" v-if="showlist" >
      <!-- slides -->
      <swiper-slide v-for="(item,index) of swiperList" :key="item.id">
        <img class="swipe-img" :src="item.imgUrl"/>
      </swiper-slide>
      <!-- Optional controls 专门用来显示轮播的页码的-->
      <!-- 这是一个具名插槽  -->
      <div class="swiper-pagination"  slot="pagination">
      </div>
    </swiper>
  </div>
</template>
<style lang="stylus" scoped>
  //  为了解决3g下的网络加载问题，防止明显的拖动，因此轮播外面包裹一个明显的DIV
  //  并且DIV大小要和图片比例一致
  //   这是修改轮播点的样式，具体是看浏览器里面的CSS样式
  // 然后修改，，这是穿透写法
  .wrapper >>> .swiper-pagination-bullet-active
    background: red !important

  .wrapper
    /* 溢出隐藏 */
    width :100%
    overflow :hidden
    /* 为了设置图片的宽高比例，高度设置为0 */
    height :0
    /*  这里是设置DIV的宽高比，优先显示图片，因为溢出隐藏了，并且边距是底部的  */
    padding-bottom :31%
    background :#25a4bb
    .swipe-img
      /*  设置图片的宽度百分百  */
      width :100%

</style>
<script>
export default {
  name: 'HomeSwiper',
  data () {
    return {
      swiperOptionimg: {
        pagination: '.swiper-pagination',
        //  循环轮播。。注意不是定时轮播，是循环轮播
        loop: true
      },
      swiperList_2:this.swiperList,
      swiperList2: [
        {
          id: 1,
          imgUrl: 'http://img1.qunarzz.com/piao/fusion/1805/77/f63bd04dd5319602.jpg_750x200_6ba8e0ca.jpg'
        },
        {
          id: 2,
          imgUrl: 'http://img1.qunarzz.com/piao/fusion/1805/e5/59fad13a64807d02.jpg_750x200_713ae984.jpg'
        }
      ]
    }
  },
  computed:{
      showlist(){
        return this.swiperList.length;
      }
  },
  props:{
    swiperList:{
      type:Array
    }
  }
}
</script>
